<template>
  <div class="pop">
    <transition name="up">
      <div v-show="popIndex==1" class="main index">
        <div class="close" @click="close"></div>
        <div class="main-inner">
          <div class="title"><img src="../assets/images/pop_index_tit.png" alt="pop-title"></div>
          <ul class="rules">
            <li v-for="(item, index) in rules" :key="index"><span v-html="item"></span></li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div v-show="popIndex" :class="['bg',popIndex==4?'share':'']" @click="close"></div>
    </transition>
  </div>
</template>

<script>
import store from '@/store'
export default {
  data () {
    return {
      rules: [
        '1.测试共5道题目，正确对出NPC提问的下半句即可累计一分；回答错误则由学习委员告知正确答案不扣分；',
        '2.巡考员沈剑心全程陪伴，可偷偷请他给你提示，注意不要超过2次哦，否则会被监考发现，处以<b style="color:red">薅头发</b>警告！',
        '3.根据考生答题分数，会有大唐语言艺术中心发放相应证书。',
        '4.考试过程严肃认(dou)真(bi)，考生应自觉遵守相关考场纪律'
      ]
    }
  },
  computed: {
    popIndex: () => store.state.popIndex
  },
  methods: {
    close () {
      store.commit('setState', { key: 'popIndex', val: 0 })
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '../assets/styles/index.styl'
.pop {
  position fixed
  z-index 100
  top 0
  left 0
  height 100vh
  width 100vw
  .main {
    position relative
    z-index 1
    position absolute
    bottom 0
    width 100%
    background #fff
    &.index {
      border-top-left-radius 30px
      border-top-right-radius 30px
      text-align center
      padding 15px
      box-sizing border-box
      background-image url('../assets/images/pop_index_rules.jpg')
      background-size 90% auto
      background-position bottom right
      background-repeat no-repeat
      padding-bottom 130px
      .title {
        margin-top 10px
        width 50%
        display inline-block
      }
      .rules {
        text-align left
        margin 10px 0
        margin-top 0
        padding 15px
        li {
          margin 10px 0
        }
      }
    }
  }
  .close {
    position absolute
    right 15px
    top 15px
    height 25px
    width 25px
    transform rotate(45deg)
    &:before, &:after {
      content ''
      display inline-block
      height 1px
      width 100%
      background #000
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
    }
    &:before {
      transform translate(-50%, -50%) rotate(90deg)
    }
  }
  .bg {
    position absolute
    bottom 0
    top 0
    right 0
    left 0
    background rgba(0, 0, 0, 0.3)
    z-index 0
    &.share {
      background-image url('../assets/images/pop_share.png')
      background-size 80%
      background-repeat no-repeat
      background-position top
    }
  }
}
</style>